<template>
    <!-- 小屏导航栏 -->
    <div class="nav-body" v-if="isSmallScreen">
        <div class="nav-content body-m">
            <el-icon @click="switchAsideMenu(true)" color="white" size="25px">
                <Menu />
            </el-icon>
            <img @click="routerTo('home')" class="nav-logo" :src="getImage('logo.png')" alt="">
            <div></div>
        </div>
    </div>
    <!-- 宽屏导航  -->
    <!-- { 'navbar-blur': state.isScrolled } -->
    <div :class="['nav-body']" v-else>
        <div class="body-m nav-content ">
            <img @click="routerTo('home')" class="nav-logo" :src="getImage('logo.png')" alt="">
            <div class="nav-list">

                <el-menu :default-active="state.menuIdx" mode="horizontal" @select="" :ellipsis="isSmallNav"
                    background-color="#1c2124" text-color="#fff" active-text-color="#ffd04b">
                    <el-sub-menu index="0">
                        <template #title>Gloabl Payment</template>
                        <el-menu-item v-for="(item, idx) in globalPaymentMenus" :key="idx" @click="routerTo(item.name)"
                            :index="`0-${idx}}`">{{
                                item.title }}</el-menu-item>
                    </el-sub-menu>
                    <el-menu-item @click="routerTo('otc')" index="1">Institutional OTC</el-menu-item>
                    <el-sub-menu index="2">
                        <template #title>Marketplace</template>
                        <el-menu-item v-for="(item, idx) in marketplaceMenus" :key="idx" @click="routerTo(item.name)"
                            :index="`2-${idx}}`">{{
                                item.title }}</el-menu-item>
                    </el-sub-menu>

                    <el-menu-item index="3">
                        <template #default>
                            <div class="login">
                                <el-button round>Login</el-button>
                                <el-button class="sign-btn" round color="black" @click="openSignUp">Sign Up</el-button>
                                <el-button round @click="routerTo('contact')">Contact</el-button>
                            </div>
                        </template>
                    </el-menu-item>
                </el-menu>
            </div>
        </div>

        <div class="scroll-progress" :style="{ width: state.progress + '%' }"></div>
    </div>

    <!-- 侧面划入的导航页面 -->
    <div :class="['nav-slide-menu', state.showAsideMenu ? 'nav-slide-open' : 'nav-slide-close']" v-if="isSmallScreen">

        <div class="nav-slide-left">
            <div class="nav-list">

                <el-menu :default-active="state.menuIdx" class="el-menu-demo" mode="vertical" @select=""
                    :ellipsis="false" unique-opened>
                    <el-sub-menu index="0">
                        <template #title>Gloabl Payment</template>
                        <el-menu-item v-for="(item, idx) in globalPaymentMenus" :key="idx" @click="routerTo(item.name)"
                            :index="`0-${idx}}`">{{
                                item.title }}</el-menu-item>
                    </el-sub-menu>
                    <el-menu-item @click="routerTo('otc')" index="1">Institutional OTC</el-menu-item>
                    <el-sub-menu index="2">
                        <template #title>Marketplace</template>
                        <el-menu-item v-for="(item, idx) in marketplaceMenus" :key="idx" @click="routerTo(item.name)"
                            :index="`2-${idx}}`">{{
                                item.title }}</el-menu-item>
                    </el-sub-menu>
                </el-menu>
            </div>

            <div class="login">
                <el-button round>Login</el-button>
                <el-button round color="black" style="color: white;" @click="openSignUp">Sign Up</el-button>
                <el-button round @click="routerTo('contact')">Contact</el-button>
            </div>
        </div>

        <el-icon @click="switchAsideMenu(false)" size="40px">
            <Close />
        </el-icon>
    </div>
</template>

<script setup lang="ts" name="NavView">
import { useScreenSize } from '@/utils/useScreenSize'
import { onMounted, onUnmounted, reactive, ref, computed } from 'vue'
import { useRoute, useRouter } from 'vue-router'
const { isSmallScreen, isSmallNav } = useScreenSize()

const router = useRouter()
const route = useRoute()

const globalPaymentMenus = [
    { title: 'Virtual Accounts', name: 'virtualAccounts' },
    { title: 'Global Collection & Payout', name: 'globalCollectionPayout' },
    { title: 'Stablecoin Checkout', name: 'stablecoinCheckout' },
    { title: 'Card', name: 'card' }
]

const marketplaceMenus = [
    { title: 'Investment opportunities', name: 'investment' },
    { title: 'How it works', name: 'howWork' },
    { title: 'How we select projects', name: 'howSelectProject' }
]

const state = reactive({
    progress: 0,
    isScrolled: false,
    showAsideMenu: false,
    menuIdx: "0"
})

let activePath = computed(() => {
    return route.path
})

const updateScrollProgress = () => {
    // 兼容不同浏览器
    const scrollTop = document.documentElement.scrollTop || document.body.scrollTop
    state.isScrolled = scrollTop >= 100

    // 总的高度
    const scrollHeight = document.documentElement.scrollHeight - document.documentElement.clientHeight
    state.progress = (scrollTop / scrollHeight) * 100
}

onMounted(() => {
    window.addEventListener('scroll', updateScrollProgress)
})

onUnmounted(() => {
    window.removeEventListener('scroll', updateScrollProgress)
})

function routerTo(name: string) {
    if (isSmallScreen.value) {
        switchAsideMenu(false)
    }
    router.push({ name })
}

function openSignUp() {
    // const url = 'https://in.sumsub.com/websdk/p/gjCn4ttK9S8Lvnx7'
    // window.open(url, '_blank', 'noopener,noreferrer');
    if (isSmallScreen.value) {
        switchAsideMenu(false)
    }
    router.push({ name: 'contact' })
}

function pushHome() {
    router.push('/')
}

function switchAsideMenu(show: boolean) {
    state.showAsideMenu = show
    if (show) {
        document.body.className = 'no-scroll'
    } else {
        document.body.className = ''
    }
}

function changeTab(path: string) {
    if (activePath.value != path) {
        router.push(path)
    }

    if (state.showAsideMenu) {
        switchAsideMenu(false)
    }
}

</script>

<style scoped lang="scss">
.nav-body {
    position: fixed;
    right: 0;
    left: 0;
    top: 0;
    height: var(--nav-height);
    z-index: 1000;
    background-color: #1c2124;
    transition: 0.2s ease;

    .scroll-progress {
        height: 3px;
        width: 0%;
        position: absolute;
        bottom: 0;
        left: 0;
        border-radius: 2px;
        // 进度颜色
        background: linear-gradient(90deg, rgba(255, 255, 255, 0) 1%, $color-primary 100%);
        // 平滑过度
        // transition: 0.2s ease-in-out;
    }

    .nav-content {
        display: flex;
        height: 100%;
        // padding: 0 1rem;
        justify-content: space-between;
        align-items: center;

        .nav-logo {
            height: 60%;
            object-fit: cover;
        }

        .nav-logo:hover {
            cursor: pointer;
        }

        .nav-list {
            display: flex;
            align-items: center;
            gap: 1rem;

            .login {
                display: flex;
                gap: 1rem;

                button {
                    margin: 0;
                }
            }
        }
    }
}

.navbar-blur {
    // 半透明
    background-color: rgba($color: #1c2124, $alpha: 0.85);
    // 毛玻璃
    backdrop-filter: blur(10px);
}

/* 测划入的导航页面 */
.nav-slide-menu {
    width: 100vw;
    height: 100vh;
    position: fixed;
    top: 0;
    left: 0;
    z-index: 1001;
    background-color: $primary-color;
    display: flex;

    .el-icon {
        padding-top: 5rem;
        flex: 1;
    }
}

.el-menu {
    border: none;
}

.nav-slide-left {
    width: 85%;
    height: 100%;
    background-color: white;
    padding: 2.5rem;
    display: flex;
    flex-direction: column;
    justify-content: space-between;

    .nav-list {
        display: flex;
        flex-direction: column;
        align-items: start;
    }

    .nav-list>* {
        font-weight: bold;
        color: $primary-color;
    }

    .login {
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        align-items: center;
        gap: 10px;

        .el-button {
            width: 100%;
            margin: 0;
        }
    }
}

.nav-slide-menu-body span,
.nav-slide-menu-body select {
    padding: 1rem 0;
    font-size: 1.1rem;
    font-weight: bold;
    cursor: pointer;
}

.nav-slide-open {
    transition: 0.25s ease;
    opacity: 1;
    visibility: visible;
}

.nav-slide-close {
    transition: 0.25s ease;
    transform: translateX(-100%);
    opacity: 0;
    visibility: hidden;
}

.nav-list {
    display: flex;
    align-items: center;
    gap: 1rem;

    :deep(.el-menu--horizontal) {

        li {
            padding: 0;
        }

        .el-sub-menu {
            &.is-active {
                .el-sub-menu__title {
                    border-bottom-color: transparent;
                }
            }
        }

        .el-menu-item {
            &.is-active {
                border-bottom-color: transparent;
                background-color: transparent;
            }
        }
    }
}


.sign-btn {
    color: white;
}
</style>